<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>剪辑区域制作动画</title>
</head>
<body>

    <canvas id="canvas" width=1200 height=800>
        Canvas not supported
    </canvas>


    <script type="text/javascript">
        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d");

        function drawText(){

            context.save();
            context.shadowColor = "rgba(100,100,150,.8)";
            context.shadowOffsetX = 5;
            context.shadowOffsetY = 5;
            context.shadowBlur = 10;

            context.fillStyle = 'cornflowerblue';
            context.fillText("HTML5", 20, 250);
            context.strokeStyle = "yellow";
            context.strokeText("HTML5", 20, 250);
            context.restore();
        }

        function setClippingRegion(radius){
            context.beginPath();
            context.arc(canvas.width/2, canvas.height/2, radius, 0, Math.PI*2, false);
            context.clip();
        }

        function fillCanvas(color){
            context.fillStyle = color;
            context.fillRect(0, 0, canvas.width, canvas.height);
        }

        function drawAnimationFrame(radius){
            setClippingRegion(radius);
            fillCanvas('lightgray');
            drawText();
        }


        var radius = canvas.width/2;
        function animate(time){
            radius -= canvas.width/100;
            fillCanvas('charcoal');

            if(radius > 0){
                context.save();
                drawAnimationFrame(radius);
                context.restore();
                requestAnimationFrame(animate);
            }
        }

        canvas.onmousedown = function(e){
            requestAnimationFrame(animate);    
        }

        context.lineWidth = .5;
        context.font = "128pt Comic-sans";
        drawText();

    </script>

</body>
</html>